<template>
    <div>
        <template v-for="(item, index) in data">
            <el-submenu :key="index" :index="item.path" v-if="item.children && item.children.length > 0">
                <template slot="title">
                    <i v-if="item.icon" :class="item.icon"></i>
                    <span>{{ item.name }}</span>
                </template>
                <menu-item :data="item.children"></menu-item>
            </el-submenu>
            <el-menu-item :key="index" v-else :index="item.path">
                <i v-if="item.icon" :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
export default {
    name: "menuItem",
    props: {
        data: {
            type: Array,
            default: [],
        },
    },
    created() {
    },
};
</script>